<template>
	<view class="content" ref="poster" @touchmove.stop.prevent>
		<headItem :activeTitle="typeName" ref="refHeadItem" @getParentList="gethomedata" @copyhaibao="generatePoster">
		</headItem>
		<view class="nr-box" id="poster">
			<view class="nr-item">
				<view class="nr-title">活动战绩</view>

				<view class="nr-div">
					<div class="item" @click="goItemDetail(1)">
						<div class="nr-num" v-if="summaryData">{{summaryData.apply_num || 0}}</div>
						<div class="nr-item-tile">报名量</div>
					</div>
					<div class="item" @click="goItemDetail(2)">
						<div class="nr-num" v-if="summaryData">{{summaryData.amount_num || 0}}
						</div>
						<div class="nr-item-tile">诚意金</div>
					</div>
					<div class="item" @click="goItemDetail(3)">
						<div class="nr-num" v-if="summaryData">{{summaryData.arrival_num || 0}}
						</div>
						<div class="nr-item-tile">到店量</div>
					</div>
					<div class="item">
						<div class="nr-num" @click="goItemDetail(4)" v-if="summaryData">{{summaryData.order_num || 0}}
						</div>
						<div class="nr-item-tile">订单量</div>
					</div>
				</view>
			</view>

			<view class="nr-list m-b">
				<view class="nr-div list-bg">
					<div class="item nr-w-15">
						排名
					</div>
					<div class="item nr-w-35">
						销售顾问
					</div>
					<div class="item nr-w-20">
						报
					</div>
					<div class="item nr-w-20">
						诚
					</div>
					<div class="item nr-w-20">
						到
					</div>
					<div class="item nr-w-20">
						订
					</div>
				</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" :style="{ paddingBottom: safeareaHeight + 'px' }"
					class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
					<view class="nr-div" v-for="(item,index) in listData" :key="index">
						<div class="item nr-w-15">
							<image :src="iconList[index]" class="rank-img" v-if="index<3"></image>
							<span v-else>{{index+1}}</span>
						</div>
						<div class="item nr-w-35 item-name">
							<view class="item-name-img">
								<u-avatar
									:src="item.staffInfo && item.staffInfo.avatar ? item.staffInfo.avatar : require('@/static/images/v2/icon/user-logo.png')"
									size="40rpx"></u-avatar>
							</view>
							<view v-if="item.staffInfo && item.staffInfo.real_name">
								{{item.staffInfo.real_name}}
							</view>
						</div>
						<div class="item nr-w-20">
							{{item.apply_num || 0}}
						</div>
						<div class="item nr-w-20">
							{{item.amount_num || 0}}
						</div>
						<div class="item nr-w-20">
							{{item.arrival_num || 0}}
						</div>
						<div class="item nr-w-20">
							{{item.order_num || 0}}
						</div>
					</view>
				</scroll-view>
			</view>
		</view>

		<poster ref="poster" :imageUrl="image" :imageWidth="500" :imageHeight="900" :drawData="drawData"
			:config="config" :wechatCode="false" :wechatCodeConfig="wechatCodeConfig" @loading="onLoading"
			@success="onSuccess" @fail="onFail">
			<template v-slot:header>
				<view>小程序海报</view>
			</template>
			<!-- <template v-slot:save>
				<view @click="saveToAlbum">保存</view>
			</template> -->
		</poster>
		<my-tabbar :currentTab='0' />
		<!-- 类型弹出层 -->
		<u-picker :show="show" @confirm="selectOk" closeOnClickOverlay keyName="title" @close="show = false"
			:columns="AcitveColumns" :immediateChange='true' @cancel="show = false" mode="selector"></u-picker>
		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import {
		getActiveList,
		gethomeData,
		activeSummary,
		activeSummaryList,
		test,
		getQrLink
	} from '@/api/system/index'
	import config from '@/config'
	import {
		mapMutations,
		mapGetters
	} from "vuex";
	import headItem from "@/components/head-item/index.vue"
	import poster from "@/components/poster";
	export default {
		components: {
			headItem,
			poster
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				baseUrl: config.baseUrl,
				navbar: 0, //状态栏高度
				statusBar: 0, // 状态栏高度 + 导航栏高度  
				customBar: 0, // 自定义标题与胶囊对齐高度
				show: false,
				dateshow: false,
				minDate: '0',
				maxDate: '0',
				defaultDate: [],
				//关键词
				keyword: '',
				typeName: "",
				typeid: '',
				AcitveColumns: [],
				loadingIs: true,
				listData: [],
				summaryData: {},
				tabBarHeight: 0,
				safeareaHeight: 0,
				queryParam: {
					activeId: null,
					page: 1,
					limit: 20
				},
				totalCount: 0, //总数量
				iconList: [
					"../../static/images/v2/icon/rank-01.png",
					"../../static/images/v2/icon/rank-02.png",
					"../../static/images/v2/icon/rank-03.png"
				],
				image: '',
				config: {
					imageMode: 'aspectFit',
					posterHeight: '80%',
					// canvasWidth 和 convasHeight使用的是px，防止不同设备Dpr不统一，导致最后图片留白边问题
					canvasWidth: 275,
					convasHeight: 490,
				},
				drawData: [],
				wechatCodeConfig: {
					serverUrl: 'https://xxx.xxx.com/xxx/xxx',
					scene: '123123',
					config: {
						x: 84.5,
						y: 320,
						w: 100,
						h: 100
					}
				}
			}
		},
		computed: {
			...mapGetters(["avatar", "nickname", "mobile", "position", 'autoname'])
		},
		mounted() {
			// if (app.globalData.safeareaHeight > 0) {
			// 	this.safeareaHeight = app.globalData.safeareaHeight;
			// }

		},

		created() {
			this.topHight = uni.getSystemInfoSync().statusBarHeight
			// var param = {
			// 	applyId: 28628,
			// }
			// test(param).then(res => {
			// 	console.log("订单数据", res)
			// })
			this.listData = []
			//触发子组件获取

		},
		onShow() {
			this.queryParam.page = 1
			this.queryParam.limit = 20
			this.listData = []
			//触发子组件获取
			this.$refs.refHeadItem.getAcitveData()
			// this.getAcitveData()
			// this.gethomedata()
		},
		methods: {
			gethomedata(e) {
				this.queryParam.activeId = e.active_id
				this.listData = []
				this.getActiveSummary()
				this.getActiveSummaryList()
				this.getQrLinks()
			},
			getQrLinks() {
				var _this = this
				getQrLink({
					id: _this.queryParam.activeId
				}).then(res => {
					if (res.code === 0) {
						// 模拟异步请求获得到的数据
						// this.wechatCodeConfig.scene = '456787';

						_this.drawData = [{
								type: 'image',
								config: {
									url: res.data.backgroundImg || '',
									x: 0,
									y: 0,
									w: 275,
									h: 490
								},
							},
							{
								type: 'image',
								config: {
									url: res.data.qrCodeUrl,
									x: 90,
									y: 300,
									w: 100,
									h: 100
								},
							},
							{
								type: 'text',
								config: {
									text: `销售顾问：${res.data.real_name}`,
									x: 140,
									y: 430,
									color: '#fff',
									font: 'normal bold 16px 黑体',
									textAlign: 'center'
								}
							}
						];
					}

				})
			},

			//获取汇总数据
			async getActiveSummary() {
				var data = {
					activeId: this.queryParam.activeId
				}
				await activeSummary(data).then(res => {
					if (!res.code) {
						this.summaryData = res.data
					}
				})

			},
			getActiveSummaryList() {
				var data = {
					activeId: this.queryParam.activeId,
					page: this.queryParam.page,
					limit: this.queryParam.limit
				}
				activeSummaryList(data).then(res => {
					if (!res.code) {
						this.listData = [...this.listData, ...res.data]
						this.totalCount = res.count
					}
				})

			},
			//点击对应项跳转到对应工作
			goWorkList(key) {
				uni.setStorageSync('summary', key);
				var activeId = this.typeid;
				if (this.defaultDate.length > 1) {

					var startDate = this.defaultDate[0]
					var endDate = this.defaultDate[this.defaultDate.length - 1]

					this.$tab.reLaunch(
						`/pages/work/index?key=${key}&activeId=${activeId}&startDate=${startDate}&endDate=${endDate}`);
				} else {

					this.$tab.reLaunch(`/pages/work/index?key=${key}&activeId=${activeId}`);
				}
			},
			goItemDetail(type) {
				this.$tab.navigateTo(`/pagesA/index/detail?type=${type}`);

			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {

				if (this.listData.length >= this.total) return false
				this.queryParam.page++
				this.getActiveSummaryList()
				console.log("触底了")
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				// uni.showToast({
				// 	icon: "none",
				// 	title: "纵向滚动 scrollTop 值已被修改为 0"
				// })
			},
			// 海报生成
			async generatePoster() {

				this.$refs.poster.createImage()
			},
			// 保存到相册
			saveToAlbum() {
				this.$refs.poster.saveToAlbum()
			},
			onLoading() {
				console.log('Loading:正在加载静态资源')
			},
			onSuccess() {
				console.log('Success:创建海报成功')
			},
			onFail(e) {
				console.log('Fail:创建海报失败', e)
			},
		},

		onLoad: function() {}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5FF !important;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	.scroll-Y {
		// height: 100%;
		// flex: 1;

		// overflow-y: auto;
		height: calc(100vh - 850rpx);
		// padding-bottom: 100rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.time-box {
		display: flex;
		justify-content: space-between;
	}

	.time-size {
		font-size: 26rpx;
		color: #fff;
		align-self: center;
		padding: 0px 2px;
	}

	.content {
		.top-bg {
			position: absolute;
			width: 100%;
			height: 537rpx;
			z-index: -100;
			background-size: cover;
		}

		.nr-box {

			width: 93%;
			margin: 0 auto;
			padding: 20rpx 0rpx;

			.nr-item {
				width: 100%;
				padding: 40rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-bottom: 1px;


				.nr-title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.85);
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;

				}

				.mb-10 {
					margin-bottom: 20rpx;
				}

				.nr-div {
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin-bottom: 5px;
					padding: 25rpx;

					.item {
						text-align: center;

						.nr-num {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #2553F7;
							line-height: 36rpx;
							text-align: center;
							font-style: normal;
							text-transform: none;
							padding-bottom: 20rpx;
						}

						.nr-item-tile {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: rgba(78, 89, 105, 0.85);
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}


				}

			}


			.nr-list {
				width: 100%;
				padding: 20rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				// margin-bottom: 50rpx;
				// background-color: yellow;
				// height: calc(100vh - 810rpx);
				.nr-div {
					width: 100%;
					display: flex;
					// justify-content: space-between;
					align-items: center;
					margin-bottom: 5px;
					padding: 10rpx 0rpx;

					.rank-img {
						width: 50rpx;
						height: 50rpx;
						align-items: center;
					}

					.item-name {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.item-name-img {
							padding-right: 20rpx;
						}
					}

					.nr-w-10 {
						width: 10%;
						text-align: left;
					}

					.nr-w-30 {
						width: 30%;
						text-align: text;
					}

					.nr-w-35 {
						width: 40%;
						text-align: center;
					}

					.nr-w-20 {
						width: 20%;
						text-align: center;
					}

					.nr-w-15 {
						width: 15%;
						text-align: center;
					}
				}

				.list-bg {
					background-color: #f6faffFF !important
				}

			}

			.m-b {
				// height: calc(100vh - 100rpx);
				// overflow: hidden;
			}


		}

		.logo {
			height: 200rpx;
			width: 200rpx;
			margin-top: 200rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
		}

		.text-area {
			display: flex;
			justify-content: center;
		}

		.title {
			font-size: 36rpx;
			color: #8f8f94;
		}
	}
</style>